<template>
    <l-panel style="padding:0;padding-left:8px;padding-right:8px;">
        <div class="base-form-wraper" style="margin: auto; max-width: 800px;" >
            <el-form :model="formData" :rules="rules" size="mini"  ref="form" label-width="60px" >
                <el-card v-if="project.f_PCWeb">
                    <div slot="header">
                        <span>PC端</span>
                        <el-switch style="float: right; padding: 3px 0" v-model="formData.isPC" />
                    </div>
                    <template v-if="formData.isPC">
                        <el-col :span="24">
                            <el-form-item label="上级" prop="f_ParentId">
                                <l-tree-select
                                    v-model="formData.f_ParentId"
                                    :options="modulesExpandTreeEx">
                                </l-tree-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="图标" prop="f_Icon">
                                <l-input-icon :iconList="lr_icons"  v-model="formData.f_Icon" >
                                </l-input-icon>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="描述" prop="f_Description">
                                <el-input type="textarea" v-model="formData.f_Description"></el-input>
                            </el-form-item>
                        </el-col>
                    </template>
                </el-card>
                <el-card v-if="project.f_App">
                    <div slot="header">
                        <span>移动端</span>
                        <el-switch style="float: right; padding: 3px 0" v-model="formData.isApp" />
                    </div>
                    <template v-if="formData.isApp">
                        <el-col :span="24">
                            <el-form-item label="图标" prop="f_IconApp">
                                <l-input-icon onlyFirst v-model="formData.f_IconApp" >
                                </l-input-icon>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="颜色"  prop="f_Color" >
                                <l-input-color v-model="formData.f_Color"
                                        placeholder="请输入"></l-input-color>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="分类" prop="f_Type">
                                <el-select v-model="formData.f_Type" placeholder="请选择分类">
                                    <el-option
                                    v-for="item in lr_dataItem['function']"
                                    :key="item.f_ItemValue"
                                    :label="item.f_ItemName"
                                    :value="item.f_ItemValue">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </template>
                </el-card>
            </el-form>
        </div>
    </l-panel>
</template>
<script>
import { mapGetters } from "vuex"
export default {
    data(){
        return {
            formData:{
                f_EnCode: '',
                f_ParentId: '',
                f_Icon: 'learun-icon-stars',
                f_Target: 'view',
                f_IsMenu:1,
                f_EnabledMark:1,
                f_SortCode: '100',
                f_UrlAddress: '',
                f_Description: '',

                isPC:true,
                isApp:true,


                f_Type: '',
                f_IconApp: 'learun-icon-stars',
                f_Color:'#3c9cff',
            },
            rules: {
                f_FullName: [
                    { required: true, message: '请输入' }
                ],
                f_Icon: [
                    { required: true, message: '请选择' }
                ],

                f_IconApp: [
                    { required: true, message: '请选择图标' }
                ],
                f_Color: [
                    { required: true, message: '请选择颜色',trigger: 'blur' }
                ],
                f_Type: [
                    { required: true, message: '请选择分类' }
                ],
            },
        };
    },
    computed:{
        ...mapGetters(["modulesExpandTreeEx"]),
    },
    created () {
        // 加载菜单信息
        this.$store.dispatch("system/moduleex/getList")
        this.lr_loadDataItem('function')
    },
    methods:{
        resetForm(){
            this.formData.isApp = true
            this.formData.isPC = true
            this.$formClear(this.$refs.form)
        },
        // 校验表单
        validateForm(){
            if(this.$validatenull(this.project.f_App)){
                this.formData.isApp = false
            }
            if(this.$validatenull(this.project.f_PCWeb)){
                this.formData.isPC = false
            }

            return new Promise((resolve) => {
                if(!this.formData.isPC && !this.formData.isApp){
                    this.$message({
                        type: 'error',
                        message: '请设置PC端或移动端至少一个!'
                    })
                    resolve(false)
                }

                this.$refs.form.validate((valid) => {
                    resolve(valid)
                })
            })
        },
        setForm(data){
            this.formData = this.$deepClone(data)
        },
        getForm(){
            return this.$deepClone(this.formData)
        }
    }
}
</script>
